<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quill富文本</title>
    <link rel="stylesheet" href="./src/lib/quill.snow.css">
    <!-- 修改工具栏默认样式 -->
    <link rel="stylesheet" href="./src/index.css">

    <style>
        #button-group {
            display: flex;
        }

        #button-group>div {
            padding: 10px;
            margin: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>

    <!-- 编辑器外部需要添加一层标签包裹住编辑器工具栏 -->
    <div>
        <div id="editor" style="height:350px;"></div>
    </div>
    <p style="color:red;margin-bottom:0;">*取值打印在控制台</p>
    <div id="button-group">
        <div id="a1">html取值</div>
        <div id="a2">html赋值</div>
        <div id="b1">content取值</div>
        <div id="b2">content赋值</div>
    </div>

    <script src="./src/jquery-1.9.0.min.js"></script>
    <script src="./src/lib/quill.min.js"></script>
    <script src="./src/lib/image-resize.min.js"></script>
    <script>
        let toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],// 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用 代码块
            [{ 'header': 1 }, { 'header': 2 }], // h1 h2
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表 无序列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 下脚标 上脚标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 向左缩进 向右缩进
            [{ 'direction': 'rtl' }], // 文本方向 居右
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字号
            [{ 'header': [1, 2, 3, 4, 5, 6] }], // 标题
            [{ 'color': [] }, { 'background': [] }], // 颜色 背景颜色
            [{ 'align': [] }], // 文本对齐
            ['clean'], // 清除字体样式
            ['link', 'image', 'video'], // 链接 图片 视频
            ['insertbtn'] // 自定义按钮
        ];

        let quill = new Quill('#editor', {
            modules: {
                // 工具条
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                        'image': imageHandler,
                        'insertbtn': function () {
                            alert('自定义按钮');
                        }
                    }
                },
                // 图片尺寸控制
                imageResize: {
                    displaySize: true
                }
            },
            theme: 'snow'
        });

        // 图片key
        const inputName = 'img';
        const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxIiwiZXhwIjoxNjM4NTIwODQ0fQ.kqb4Jb_gJZj4OrZYXvmYXTSnIetvMDm2Qls7tJiXq5A';

        function imageHandler() {
            let fileInput = quill.container.querySelector('input.ql-image[type=file]');
            if (fileInput === null) {
                fileInput = document.createElement('input');
                // 监听选择文件
                fileInput.addEventListener('change', function () {
                    let formData = new FormData();
                    formData.append(inputName, fileInput.files[0]);
                    if (token) {
                        formData.append('token', token);
                        formData.append('object', 'product');
                    }
                    $.ajax({
                        type: 'POST',
                        url: 'https://dapp.kcguoyi.com/api/service/upload/huawei',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        beforeSend: function (request) {
                            request.setRequestHeader("Authorization", 'Bearer ' + token);
                        },
                        success: function (res) {
                            const len = quill.getSelection(true).index
                            quill.insertEmbed(len, 'image', res.body[0].filepath)
                            quill.setSelection(len + 1);
                            fileInput.value = ''; // inputfile置空
                        }
                    })
                })
            }
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('name', inputName);
            // 可设置上传图片的格式
            fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
            fileInput.classList.add('ql-image');
            fileInput.style.display = 'none';
            quill.container.appendChild(fileInput);
            fileInput.click();
        }

        // 初始化自定义button
        initButton();
        function initButton() {
            const sourceEditorButton = document.querySelector('.ql-insertbtn');
            sourceEditorButton.innerHTML = '<i style="font-size: 18px;color: red">+</i>';
        }
        // content取值
        $('#b1').click(function () {
            console.log(quill.getContents())
        })
        // content赋值
        $('#b2').click(function () {
            quill.setContents([
                { insert: 'Hello ' },
                { insert: 'World!', attributes: { bold: true } },
                { insert: '\n' }
            ]);
        })
        // html取值
        $('#a1').click(function () {
            console.log(quill.container.firstChild.innerHTML);
        })
        // html赋值
        $('#a2').click(function () {
            var html = '<p>测试赋值</p><p><img src="https://kchi.obs.cn-north-4.myhuaweicloud.com:443/c80cc30b-9fd9-4f05-8812-c12390f84490.jpg"></p>';
            quill.container.firstChild.innerHTML = html;
        })

    </script>
</body>

</html>